<template>
	<view class="main-content-area">
		<view class="u-p-t-40 header-area">
			<swiper v-if="announcement.length > 0" class="announcement-swiper" circular :autoplay="true"
				:interval="3000" circular vertical>
				<swiper-item v-for="(item, index) in announcement" :key="index">
					<view class="announcement-area u-m-l-20 u-m-r-20 u-padding-8">
						<u-avatar :src="item.avatar" size="42"></u-avatar>
						<view class="u-m-l-16 white u-p-r-16 xs">尾号为{{item.phone}}的{{item.name}}{{item.time}}前进行了风险检测查询
						</view>
					</view>
				</swiper-item>
			</swiper>

			<image src="https://resource.lanbaozixun.com/uploads/images/20250916144530ddc375765.png" mode="widthFix"
				class="hint u-m-t-40 u-m-l-20"></image>
		</view>

		<view class="introduction-area">
			<view class="introduction-title-area">
				<image class="content-img"
					src="https://resource.lanbaozixun.com/uploads/images/20250916145332d611d5536.png" mode="widthFix">
				</image>
				<image v-if="video" @click="showVideo" class="video-show-btn u-m-l-20 u-m-t-10"
					src="https://resource.lanbaozixun.com/uploads/images/20250916144530b70bf3801.png" mode="widthFix">
				</image>
			</view>

			<view class="bg-white u-p-b-40 u-border-radius-20">
				<u-grid :border="false">
					<u-grid-item v-for="(item,index) in testLists" :key="index">
						<u-icon :name="item.icon" :size="90"></u-icon>
						<text class="u-line-1 u-m-t-10">{{item.text}}</text>
					</u-grid-item>
				</u-grid>
				<view class="u-m-t-40 u-m-l-40 u-m-b-20 u-m-r-40 buy-number-information u-flex">
					<u-icon name="https://resource.lanbaozixun.com/uploads/images/2025091614452753feb7671.png"
						:size="30"></u-icon>
					<view class="u-m-l-10 sm">
						已有 13,789 人进行风险检测查询
					</view>
				</view>

				<view class="next-btn lg" @click="next">
					下一步
				</view>

				<view class="u-flex u-row-between u-m-t-40 u-m-b-40 u-m-l-40 u-m-r-40 footer-btn">
					<view @click="showHistoryPopup = true">查询历史报告</view>
					<view v-if="history" @click="showCase">查看示例报告</view>
				</view>
			</view>
		</view>

		<u-popup v-model="showHistoryPopup" mode="center" closeable>
			<view class="popup-content-area">
				<image src="https://resource.lanbaozixun.com/uploads/images/202509161544209af264595.png" mode="widthFix"
					class="w-full"></image>
				<view class="bg-white form-content-area">
					<u-form ref="uForm" class="u-p-l-20 u-p-r-20" :model="formData" :error-type="['toast']"
						:rules="rules">
						<u-form-item prop="phone" :border-bottom="false">
							<u-input v-model="formData.name" placeholder="请输入姓名"
								:custom-style="{background:'#F2F2F2',padding:'5rpx 33rpx', borderRadius:'10rpx'}" />
						</u-form-item>
						<u-form-item prop="phone" :border-bottom="false">
							<u-input v-model="formData.phone" placeholder="请输入手机号"
								:custom-style="{background:'#F2F2F2',padding:'5rpx 33rpx', borderRadius:'10rpx'}" />
						</u-form-item>
						<u-form-item prop="code" :border-bottom="false">
							<u-input v-model="formData.code" placeholder="请输入验证码"
								:custom-style="{background:'#F2F2F2',padding:'5rpx 33rpx', borderRadius:'10rpx'}" />
							<view class="sms-btn sm row-center u-m-l-30 white" @click="$sendSms">
								<view v-show="canSendSms">获取验证码</view>
								<u-count-down ref="countDown" :show-days="false" :timestamp="time" :showColon="false"
									separator="zh" color="#fff" separator-color="#fff" :show-hours="false"
									:show-minutes="false" :autoplay="false" v-show="!canSendSms"
									@end="countDownFinish()" bg-color="#2DAAFF" />
							</view>
						</u-form-item>

						<u-button type="primary" :custom-style="{
							width:'100%',
							fontSize:'14px',
							margin: '40rpx 0rpx 0',
							borderRadius:'10rpx',
							background: '#2DAAFF'
						}" @click="query">查询</u-button>
					</u-form>
				</view>
			</view>
		</u-popup>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
	</view>
</template>

<script>
	import {
		sendSms
	} from '@/api/app';
	import {
		SMSType
	} from "@/utils/type"
	import {
		mapGetters,
	} from "vuex";
	import {
		isWeixinClient
	} from '@/utils/tools.js'
	import {
		basic,
		oauthUrl,
		queryReportId
	} from '../../api/enterprise_report'
	import Cache from "@/utils/cache";
	import wechath5 from '@/utils/wechath5'
	export default {
		data() {
			return {
				openId: '',
				isWeixin: false,
				testLists: [{
						'text': '多头借贷检测',
						'icon': 'https://resource.lanbaozixun.com/uploads/images/202509161445297dc419894.png'
					},
					{
						'text': '网贷失信名单',
						'icon': 'https://resource.lanbaozixun.com/uploads/images/2025091614452947f1a6361.png'
					},
					{
						'text': '黑名单检测',
						'icon': 'https://resource.lanbaozixun.com/uploads/images/20250916144529c14b51293.png'
					},
					{
						'text': '行为风险检测',
						'icon': 'https://resource.lanbaozixun.com/uploads/images/20250916144528bfaf00756.png'
					},
					{
						'text': '司法风险检测',
						'icon': 'https://resource.lanbaozixun.com/uploads/images/202509161445285b0a09031.png'
					},
					{
						'text': '运营商检测',
						'icon': 'https://resource.lanbaozixun.com/uploads/images/20250916144529c9c155838.png'
					},
					{
						'text': '认证风险检测',
						'icon': 'https://resource.lanbaozixun.com/uploads/images/20250916144528b0fc01941.png'
					},
					{
						'text': '风险评估',
						'icon': 'https://resource.lanbaozixun.com/uploads/images/202509161445277fcbd4094.png'
					},
					{
						'text': '消费违约',
						'icon': 'https://resource.lanbaozixun.com/uploads/images/20250916144528e35be6914.png'
					}
				],
				video: '',
				history: '/yixu/pages/risk/exampleReport',
				announcement: [],
				time: 60,
				canSendSms: true,
				loadingShowStatus: true,
				share_id: 0,
				showHistoryPopup: false,
				formData: {
					name: '',
					phone: '',
					code: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			};
		},
		async onLoad(e) {

			this.isWeixin = isWeixinClient()

			if (this.isWeixin && this.$u.test.isEmpty(e.openId)) {
				var {
					data
				} = await oauthUrl({
					url: window.location.href
				})
				window.location.href = data
			} else if (this.isWeixin && !this.$u.test.isEmpty(e.openId)) {
				this.openId = e.openId
				this.loadingShowStatus = false;
			} else if (!this.isWeixin) {
				this.loadingShowStatus = false;
			}

			if (!this.$u.test.isEmpty(e.share_id)) {
				this.share_id = e.share_id
			}

			const res = await basic();

			if (res.code == 1) {
				this.video = res.data.video
				this.announcement = res.data.announcement
			}
			this.loadingShowStatus = false
			
			uni.$on('h5shareSetSuccess', function() {
				const shareInfo = Cache.get("shareInfo");
				wechath5.share({
					shareTitle: '大数据报告查询',
					shareImage: shareInfo.mnp_share_image,
					shareLink: `https://dtm.lanbaozixun.com/mobile/yixu/pages/risk/share?invite_code=${this.inviteCode}`,
					shareDesc: '大数据报告查询'
				})
			})
		},
		methods: {
			countDownFinish() {
				this.canSendSms = true;
			},
			next() {
				if (this.$u.test.isEmpty(this.share_id)) {
					this.$toast({
						title: '缺失指定参数～'
					})
					return;
				}

				uni.navigateTo({
					url: '/yixu/pages/risk/inquire?share_id=' + this.share_id + '&openId=' + this.openId
				})
			},
			// 发送验证码
			$sendSms() {
				const _this = this;
				if (_this.canSendSms == false) {
					return;
				}
				if (!_this.formData.phone) {
					_this.$toast({
						title: '请填写手机号信息～'
					})
					return;
				}

				sendSms({
					mobile: _this.formData.phone,
					key: SMSType.YZ
				}).then(res => {
					if (res.code == 1) {
						_this.canSendSms = false;
						_this.$refs.countDown.start();
						_this.$toast({
							title: res.msg
						});
					}
				})
			},
			query(){
				const _this = this;
				_this.$refs.uForm.setRules(_this.rules);
				let {
					name,
					phone,
					code
				} = _this.formData;
				_this.$refs.uForm.validate(valid => {
					if (valid) {
						queryReportId({
							id_card_name: name,
							mobile: phone,
							code: code,
						}).then(res => {
							if (res.code == 1) {
								uni.navigateTo({
									url: '/yixu/pages/risk/info?id=' + res.data
								})
							} else {
								_this.$u.toast(res.msg);
							}
						})
						
					}
				})
			},
			showCase() {
				uni.navigateTo({
					url:this.history
				})
			},
			showVideo() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.video
				})
			},
		},
		computed: {
			...mapGetters(["inviteCode"])
		}
	}
</script>

<style lang="scss">
	.main-content-area {
		min-height: 100vh;
		background: linear-gradient(180deg, #165DFF 0%, #7DAAFC 100%);

		.announcement-swiper {
			height: 29px;
		}

		.announcement-area {
			display: inline-flex;
			align-items: center;
			border-radius: 100rpx;
			background-color: rgba(0, 0, 0, 0.1);
		}
	}

	.header-area {
		padding-bottom: 160rpx;
		background: url(https://resource.lanbaozixun.com/uploads/images/202509161445306a1b36084.png) no-repeat 100%;
		background-size: 100% 100%;

		.hint {
			width: 80vw;
		}
	}

	.introduction-area {
		width: calc(100vw - 40rpx);
		border-radius: 20rpx;
		margin: -130rpx 20rpx 0;

		.introduction-title-area {
			width: 100%;
			display: inline-flex;
			background: url(https://resource.lanbaozixun.com/uploads/images/20250916150926583cc8632.png) no-repeat 100%;
			background-size: 100% 100%;
			padding: 20rpx 30rpx 70rpx;

			.content-img {
				width: 264rpx;
				height: 92rpx;
			}

			.video-show-btn {
				width: 152rpx;
				height: 52rpx;
			}
		}
	}

	.buy-number-information {
		color: #FE7212;
		padding: 10rpx 24rpx;
		border-radius: 100rpx;
		background: linear-gradient(270deg, rgba(255, 133, 49, 0.1) 0%, rgba(254, 114, 18, 0.1) 100%);
	}

	.next-btn {
		color: white;
		padding: 25rpx 0;
		text-align: center;
		border-radius: 5rpx;
		margin: 30rpx 40rpx 0;
		background: #2daaff;
	}


	.footer-btn {
		color: #2DAAFF;
	}

	.popup-content-area {
		width: 85vw;
		background: white;
		overflow: hidden;
		border-radius: 35rpx;

		.w-full {
			width: 100%;
		}

		.form-content-area {
			padding: 60rpx 40rpx;
		}

		.sms-btn {
			padding: 0 15rpx;
			background: #2DAAFF;
			border-radius: 5rpx;
		}
	}
</style>